import React from 'react';
import { TouchableOpacity, ActivityIndicator, StyleSheet, View } from 'react-native';
import { ThemedText } from './ThemedText';
import { useTheme } from './theme/ThemeContext';
import { ThemedButtonProps } from './types';

export function ThemedButton({
  title,
  onPress,
  style,
  textStyle,
  disabled = false,
  loading = false,
  variant = 'primary',
  leftIcon,
  rightIcon,
}: ThemedButtonProps) {
  const { theme } = useTheme();

  const getButtonStyle = () => ({
    ...styles.button,
    backgroundColor: variant === 'outline' 
      ? 'transparent'
      : variant === 'secondary'
        ? theme.colors.secondary
        : theme.colors.primary,
    borderColor: variant === 'outline' ? theme.colors.primary : 'transparent',
    borderWidth: variant === 'outline' ? 1 : 0,
    opacity: disabled ? 0.5 : 1,
    ...style,
  });

  const getTextStyle = () => ({
    ...styles.text,
    color: variant === 'outline' ? theme.colors.primary : '#FFFFFF',
    ...textStyle,
  });

  return (
    <TouchableOpacity
      style={getButtonStyle()}
      onPress={onPress}
      disabled={disabled || loading}
    >
      {loading ? (
        <ActivityIndicator color="#FFFFFF" />
      ) : (
        <View style={styles.contentContainer}>
          {leftIcon}
          <ThemedText style={getTextStyle()}>
            {title}
          </ThemedText>
          {rightIcon}
        </View>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    height: 48,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
  },
  contentContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
}); 